import React, { useEffect, useState, useRef } from "react";

const App = () => {
  // 通过 hooks 钩子

  // 1. 声明数据 useState
  const [count, setCount] = useState(1);

  // 2. 生命周期 useEffect 副作用
  useEffect(() => {
    // 1. 页面首次渲染完毕执行           componentDidMount
    // 2. 当依赖的数据发生改变的时候执行   componentDidUpdate
    // 3. 拥有返回值函数，该函数组件被销毁的时候执行 componentWillUnMount
    console.log(btn.current);

    return () => {
    
    }
  }, [count]);

  // 3. 获取节点 useRef
  const btn = useRef()
  return (
    <div>
      <h1>函数组件</h1>
      <div>{count}</div>
      <button onClick={() => setCount(count + 1)}>+1</button>
      <button ref={btn} onClick={() => setCount(() => count + 1)}>+1</button>
    </div>
  );
};

export default App;
